const getServerSideProps = async (context) => {
  const res = await fetch('http://localhost:3000/api' + context.resolvedUrl);
  const data = await res.json();

  return { props: { data } };
}

const PageSubstance = (props) => {
  const data = props.data

  switch (data.resultType) {
    case 'treeContents':
      return (
        <div>
          <h1>Items:</h1>
          <ul>
            {data.resultContent.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        </div>
      );
      
      break;
    case 'textBlob':
      return (
        <div>
          <h1>Text:</h1>
          {data.resultContent}
        </div>
      );

      break;
    case 'binaryBlob':
        return (
          <div>
            <p>Binary content cannot be displayed.</p>
          </div>
        );
  
        break;
    case 'error':
      return (
        <div>
          <h1>Error:</h1>
          {data.resultContent}
        </div>
      );

      break;
  }
}

const Main = ({ data }) => {
  return (
    <div>
      <PageSubstance data={data} />
    </div>
  );
}

export { getServerSideProps };
export default Main;